<template>
    <h3>Ref</h3>

    <!-- 使用组件暴露出来的数据 -->
    <!-- 直接使用ref地址的名字（不需要写.value） -->
    <p>ageRef: {{ageRef}}</p>
    <p>nameRef: {{nameRef}}</p>

</template>

<script>
import { ref } from 'vue';

export default {
    name:'Ref',
    setup(props,ctx){
        console.log('Ref setup',props,ctx);

        /* 创建一个地址 并在里面填充初始值 */
        const ageRef = ref(18)
        const nameRef = ref("steve")

        setTimeout(() => {
            // 修改地址内的值
            ageRef.value = 28
        }, 3000);

        /* 将数据暴露给模板 */
        return {
            ageRef,
            nameRef
        }
    }
}
</script>